<template>
	<div>
		<h2>我是首页</h2>
		<p>我是首页内容，哈哈哈哈</p>
		<router-link to="/home/news">新闻</router-link>
		<router-link to="/home/message">消息</router-link>
		<router-view></router-view>
		
		<h2>{{message}}</h2>
	</div>
</template>

<script>
	export default{
		name:"home",
		data(){
			return{
				message:'你好啊',
				path:'/home/news'
			}
		},
		created() {
			//创建
			console.log('created');
			this.$router.push(this.path);
			// document.title='首页';
		}, 
		destroyed(){
			//销毁
			console.log('destroyed')
		},
		
		mounted() {
			//挂载
			// console.log('mounted');
		},
		updated() {
			//页面更新
			// console.log('updated');
		},
		// activated,deactivated 这两个函数，只有该组件被保持了状态使用了keep-alive时，才是有效的
		activated() {
			//活跃状态
			console.log('activated');
			
			this.$router.push(this.path);
		},
		deactivated() {
			//不活跃
			console.log('deactivated');
			
			// this.path=this.$route.path;
		},
		beforeRouteLeave (to, from, next) {
		  // 导航离开该组件的对应路由时调用
		  // 可以访问组件实例 `this`
			this.path=this.$route.path;
			console.log(this.path);
			next();
		} 
		
		/* beforeRouteEnter (to, from, next) {
		    // 在渲染该组件的对应路由被 confirm 前调用
		    // 不！能！获取组件实例 `this`
		    // 因为当守卫执行前，组件实例还没被创建
		},
		beforeRouteUpdate (to, from, next) {
		  // 在当前路由改变，但是该组件被复用时调用
		  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
		  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
		  // 可以访问组件实例 `this`
		},
		beforeRouteLeave (to, from, next) {
		  // 导航离开该组件的对应路由时调用
		  // 可以访问组件实例 `this`
		} */
		
	}
</script>

<style>
</style>
